<template>
  <div id="app">
    <el-backtop></el-backtop><!-- 全局使用回到顶部 -->
    <main-head-bar></main-head-bar>
    <!-- 头部组件 -->
    <router-view />
    <!-- 留坑 -->
    <main-foot-bar />
  </div>
</template>

<script>
/* HeadBar抽离整理，HeadBar为总的一个大盒子，盒子中装着四个小盒子HeadBarItem，小盒子中的内容不同，使用插槽来动态变化。创建路由。每个路由的唯一性来确定激活状态的样式。最后抽出一整个大的MainHeadBar来放入到vue.app中（记得解决路由重复点击报错的问题） */
/* 配置路由时使用html5的history，使用replace让他不能返回 */
import MainHeadBar from "components/MainHeadBar";
import MainFootBar from "components/MainFootBar";
export default {
  name: "App",
  components: {
    MainHeadBar,
    MainFootBar
  }
};
</script>

<style>
@import "assets/css/base.css";
</style>
